@import "../../../style/variables";

roster-filter {
    $font-color: #333;
    $tips-color: #999;
    $gray-color: #e9e9e9;
    $filter-color: #666666;
    $filter-border-color: #f4f4f4;
    $selected-color: #2db566;

    @function computed-vw($px) {
        @return $px/1080*100vw;
    }

    ion-header.header-ios {
        height: 17.6vw;
        .toolbar-ios:last-child .toolbar-background-ios {
            background: linear-gradient(to right, #63b24c, #018c6e);
        }
        .backIcon {
            width: 7vw;
            height: 8vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_return.png);
            background-repeat: no-repeat;
        }
        .toolbar-title-ios {
            color: #fff;
            font-size: computed-vw(60);
        }
    }

    .scroll-content {
        background-color: #fff;
    }

    .content-rel {
        padding: computed-vw(60);
        .item-cover {
            display: none;
        }
        .row-title {
            font-size: computed-vw(54);
            padding-bottom: computed-vw(40);
            border-bottom: 0.35vw solid $gray-color;
            margin-bottom: computed-vw(40);
            justify-content: space-between;
            .clear-btn{
                font-size: computed-vw(45);
                color: $resetButtonColor;
                background-color: transparent;
                padding: 0;
                margin: 0;
                line-height: computed-vw(54);
            }
            .filter-expand {
                float: right;
                width: computed-vw(54);
                height: computed-vw(54);
                line-height: computed-vw(54);
                background-image: url("../assets/images/activity/roster-list/arrow-up.png");
                background-size: 100% 100%;
                transform: rotate(180deg);
                transition: all .2s ease-in-out;
                position: relative;
                top: 5px;
                &_down{
                    transform: rotate(0deg);
                }
            }
        }
        .row-title ~ .collapse{
            max-height: 0;
            overflow: hidden;
        }
        .row {
            transition: all .2s ease-in-out;
            max-height: 9999px;
        }
        .row ~ .row-title {
            margin-top: computed-vw(60);
        }
        .datetime-ios {
            font-size: computed-vw(45);
            color: $filter-color;
            margin-bottom: computed-vw(30);
            padding: 0;
            border: 0.36vw solid $filter-border-color;
            border-radius: computed-vw(10);
            text-align: center;
            width: computed-vw(450);
        }
        .datetime-text{
            height: computed-vw(90);
            line-height: computed-vw(90);
            font-size: computed-vw(45);
        }
        .row-input{
            font-size: computed-vw(45);
            color: $filter-color;
            margin-bottom: computed-vw(30);
            padding: 0;
            border: 0.36vw solid $filter-border-color;
            border-radius: computed-vw(10);
            text-align: center;
            width: 100%;
            height: computed-vw(90);
            line-height: computed-vw(90);
            input{
                padding: 0 computed-vw(36);
                margin: 0;
            }
        }
        .error_input {
            border-color: #da5c56;
            .datetime-text {
                border-color: #da5c56;
                color: #da5c56;
            }
        }
        .datetime-Separator {
            width: 5.5vw;
            height: computed-vw(90);
            position: relative;
            &:after {
                content: " ";
                width: computed-vw(45);
                border-bottom: 0.33vw solid $gray-color;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .filter-btn {
            color: $filter-color;
            margin-bottom: computed-vw(30);
            //border: 0.36vw solid $filter-border-color;
            background-color: #f5f5f5;
            border-radius: computed-vw(10);
            text-align: center;
            font-size: computed-vw(45);
            width: computed-vw(450);
            height: computed-vw(90);
            line-height: computed-vw(90);
            &_long {
                width: computed-vw(450);
            }
            &_short {
                width: computed-vw(276);
            }
            &_selected {
                color: #fff;
                background-color: $selected-color;
                border: none;
            }
        }
        .row {
            .filter-btn:nth-of-type(2n){
                margin-left: 5vw;
            }
        }

    }

    @media only screen and (width: 375px) and (height: 812px) {
        ion-content {
            .scroll-content {
                margin-top: 88px !important;
            }
        }
    }

    ion-footer {
        .row {
            height: 100%;
            .col {
                padding: 0;
                .button-ios {
                    width: 100%;
                    height: computed-vw(130);
                    margin: 0;
                    box-sizing: border-box;
                    color: #fff;
                    font-size: computed-vw(45);
                    border-radius: 0;
                }
                .foot-btn_reset {
                    background-color: $resetButtonColor;
                    &:active {
                        background-color: #f37068;
                    }
                }

                .foot-btn_done {
                    background-color: $doneButtonColor;
                    &[disabled] {
                        background-color: #b7b7b7;
                    }
                    &:active:not([disabled]) {
                        background-color: #51c360;
                    }
                }
            }
        }

    }
}
.roster-filter_picker {
    .picker-col:nth-child(2) {
        .picker-opt:after {
            content: "年";
        }
    }
    .picker-col:nth-child(3) {
        .picker-opt:after {
            content: "月";
        }
    }
    .picker-col:nth-child(4) {
        .picker-opt:after {
            content: "日";
        }
    }
}
